<template>
  <div class="bg-[#1e1e1f] px-5 py-5 md:px-12 md:py-10 text-left border border-[#383838] rounded-3xl text-amber-50 mx-3 mb-5">
    <header>
      <div class="text-xl md:text-2xl font-bold text-white mb-5 fadein-bot title-section flex items-center">
        工作履历 &nbsp;
        <div class="h-[1px] w-32 bg-amber-200 md:w-96" data-aos="zoom-in-left" data-aos-duration="600"></div>
      </div>
    </header>
    <main class="text-xs md:text-base text-justify font-serif flex flex-col md:flex-row md:gap-8 md:items-start">
      <div class="w-full flex flex-col md:flex-row">
        <div class="flex flex-col justify-start">
          <div class="fadein-up">
            <div v-for="(experience, expIndex) in workExperiences.values" :key="experience.id" class="mb-10">
              <span class=" text-xl bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">{{ experience.position }}</span>
              <p class="text-gray-400 mb-3">{{ experience.company }} | {{ experience.duration }}</p>
              <div class="ml-5">
                <!-- 岗位职责 -->
                <div class="mb-6">
                  <span class=" text-xl bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">岗位职责</span>
                  <ul class="list-disc ml-5 space-y-2">
                    <li v-for="(responsibility, respIndex) in experience.responsibilities" :key="respIndex" class="text-gray-300">
                      {{ responsibility.content }}
                    </li>
                  </ul>
                </div>
                <!-- 项目内容 -->
                <div class="mb-6">
                  <span class=" text-xl bg-clip-text bg-gradient-to-l from-slate-100 to-amber-300 text-transparent">项目内容</span>
                  <div v-for="(project, projIndex) in experience.projectInfos" :key="projIndex" class="mb-2">
                    <button @click="togglePanel(expIndex, projIndex)" class="w-full text-left text-gray-300 focus:outline-none">
                      <div class="flex justify-between items-center bg-[#282828] p-3 rounded-lg">
                        <span class="bg-clip-text bg-gradient-to-r from-slate-100 to-amber-300 text-transparent">{{ project.title }}</span>
                        <svg :class="{'transform rotate-180': isActivePanel(expIndex, projIndex)}" class="w-4 h-4 transition-transform duration-200 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                      </div>
                    </button>
                    <div v-show="isActivePanel(expIndex, projIndex)" class="bg-[#282828] p-3 rounded-lg transition-all duration-500 overflow-hidden"
                         :class="{'max-h-0': !isActivePanel(expIndex, projIndex), 'max-h-96': isActivePanel(expIndex, projIndex)}">
                      <div class="mt-2 pl-4 text-gray-200 space-y-2">
                        <p><strong>项目介绍：</strong> {{ project.projectIntroduce }}</p>
                        <p><strong>技术栈：</strong> {{ project.techStack }}</p>
                        <p><strong>项目时长：</strong> {{ project.duration }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import { toGetWorkExperience } from "../../../api/experience.js";

export default {
  name: 'ExperienceComponent',
  setup() {
    const workExperiences = reactive({
      values: [] // 存放工作经历数据
    });

    const getExperiences = async () => {
      workExperiences.values = await toGetWorkExperience(); // 异步获取工作经历数据
    };

    const activePanel = ref({ expIndex: null, projIndex: null });

    const togglePanel = (expIndex, projIndex) => {
      // 如果当前已经展开，则收起；如果当前未展开，则展开
      if (activePanel.value.expIndex === expIndex && activePanel.value.projIndex === projIndex) {
        activePanel.value = { expIndex: null, projIndex: null };
      } else {
        activePanel.value = { expIndex, projIndex };
      }
    };

    const isActivePanel = (expIndex, projIndex) => {
      return activePanel.value.expIndex === expIndex && activePanel.value.projIndex === projIndex;
    };

    onMounted(() => {
      getExperiences(); // 组件挂载后执行获取经历的方法
    });

    return {
      workExperiences,
      activePanel,
      togglePanel,
      isActivePanel
    };
  }
};
</script>

<style scoped>
.fadein-up {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.title-section {
  display: flex;
  align-items: center;
}
</style>
